<!--
* description: 维修技师
* author:xuliwen
* createdDate:2021-2-3
-->
<template>
  <section class="editBigAreaInfo">
    <el-dialog
      v-dialogDrag
      :visible="popupsVisible"
      width="70%"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeEdit"
    >
      <dialogHeader slot="title" :title="titleName" :style-type="$store.state.app.dialogType" />
      <!-- 显示按钮的onetabel -->
      <one-table-template
        ref="multipleTable"
        :dynamic-buttons="tableButtons"
        :dynamic-components="tableComponents"
        :dynamic-is-show-select="true"
        :dynamic-api-config="apiConfig"
        :dynamic-table-cols="tableCols"
        :dynamic-form-fields="formField"
        :dynamic-is-show-more-btn="false"
        :callback-obj="callbackObj"
      />
    </el-dialog>
  </section>
</template>

<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import dialogHeader from '@/components/dialogHeader'
import OneTableTemplate from '@/components/templates/oneTable'
import api from '@/api/se/apiBaseData'
export default {
  components: {
    dialogHeader,
    OneTableTemplate
  },
  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins],
  props: {
    popupsVisible: {
      type: Boolean,
      default: false
    },
    dataForForm: {
      type: Object,
      default: () => {}
    },
  },
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      selectiondata: [],
      editPopupsVisible: false,
      titleName: '门店维修技师维护',
      // 网格查询API配置对象
      apiConfig: api.teamsTechnicianSettingQueryEmp,
      // 动态组件-按钮
      tableButtons: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          name: 'search',
          clickEvent: () => this.queryTable(1),
          text: this.$t('sys.button.query') /* 查询*/,
          position: 'right'
        },
        {
          compKey: 'btnKey2',
          type: '',
          size: 'small',
          icon: 'iconfont  icon-cancel',
          clickEvent: () => this.chooseHuman(),
          text: '选择' // 取消
        },
        {
          compKey: 'btnKey2',
          type: '',
          size: 'small',
          name: 'reset',
          clickEvent: () => this.reset(),
          text: this.$t('sys.button.reset'),
          position: 'right' // 重置
        }
      ],
      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
          : [
            {
              compKey: 'compKey1',
              labelName: '部门名称：',
              codeField: 'deptName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              span: 8,
              isMust: true
            },
            {
              compKey: 'compKey2',
              labelName: '员工姓名：',
              codeField: 'empName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              span: 8,
              isMust: true
            },
            {
              compKey: 'compKey3',
              span: 8,
              labelName: '是否在职：',
              codeField: 'isEnable',
              component: () => import('@/components/org/LookupValue'),
              oFields: 'statusId,statusText',
              options: [
                { statusId: '1', statusText: '在职' },
                { statusId: '0', statusText: '离职' }
              ],
              type: 'dropdownList',
              isMul: false,
              isMust: true
            }
          ],
      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'releaseId',
              label: '主键ID',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'updateControlId',
              label: '并发控制ID',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'bigAreaId',
              label: '大区ID',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'empCode',
              label: '员工编号'
            },
            {
              prop: 'empName',
              label: '员工姓名'
            },
            {
              prop: 'deptName',
              label: '部门'
            },
            {
              prop: 'stationName',
              label: '岗位'
            },
            {
              prop: 'genderName',
              label: '性别'
            },
            {
              prop: 'isEnableCn',
              label: '是否在职'
            }
          ],
      callbackObj: {
        onCheckSelectChange: (selection) => {
          this.selectiondata = selection
        }
      },
      formField: {
        isEnable: '',
        empName: '',
        deptName: '',

      }
    }
  },
  created() {
    this.$nextTick(() => { this.queryTable(1) })
  },
  methods: {

    // 选择保存
    chooseHuman() {
      this.selectiondata.forEach(element => {
        element.repairGroupId = this.dataForForm.repairGroupId
        element.dlrCode=this.dataForForm.dlrCode
        element.dlrId=this.dataForForm.dlrId
      })
      const that = this
      const queryObj = {
        // 保存mutation
        type: 'mutation',
        // api配置
        apiConfig: api.addTechnician,
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: that.selectiondata

      }
      // 转换了中台请求格式数据
      var paramD = this.$getParams(queryObj)
      // 调用中台API方法（可复用）
      this.$requestAPI(paramD).then(response => {
        if (response.result === '1') {
          this.$message({
            message: this.$t('sys.tips.esTip5') /* 保存成功*/,
            type: 'success',
            duration: 1000
          })
          this.popupsVisible = false
          this.$nextTick(() => {
            this.$parent.queryTable(1)
          })
        } else {
          // 保存失败
          this.$message({
            message:
              '保存失败:' + response.msg,
            type: 'warn',
            uration: 1000
          })
        }
        this.popupsVisible = false
      })
    },
    showEdit() {
      this.editPopupsVisible = true
    },
    // 关闭弹窗
    closeEdit() {
      this.$emit('sendCodeClose')
    }
    // queryform() {
    // var queryid = { orderId: this.dataForForm.saleOrderId }
    // // 先读取参数中的传输对象
    // const returnObj = {
    // // api配置
    //   apiConfig: orgApis.orderinvoicedetailsQuery,
    // 条件/实体参数（变量），根据typeParam中的定义配置
    // variables: queryid
    // }
    // 转换了中台请求格式数据
    // var paramD = this.$getParams(returnObj, null, this.dynamicApiStyle)
    // 调用中台API方法（可复用）
    // this.$requestAPI(paramD, this.dynamicApiStyle).then(response => {
    //   if (response.result === '0') {
    //     if (response.msg) {
    //       this.$message({
    //         message: response.msg,
    //         type: 'warn',
    //         uration: 2000
    //       })
    //     }
    //     return
    //   }
    //   // 返回json
    //   if (response.result === '1') {
    //     Object.assign(this.formField, response.rows[0], response.rows[1])
    //     console.log(this.formField)
    //   }
    // }).catch(err => {
    //   console.info(err)
    // })
    // }
  }
}
</script>
<style lang='scss' scoped>
  /deep/ .el-dialog{
    margin-top:5rem !important
  }
</style>
